<template>
  <div>
    <!--    顶部状态栏-->
    <div class="top-status-bar">
      <span class="time" style="float: left">{{time}}</span>
      <img src="@/assets/电 90%.png"
           style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 15px;">
      <img src="@/assets/280-手机网络.png"
           style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
      <img src="@/assets/手机信号.png"
           style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
    </div>
    <!--    导航栏（系统消息、订单消息、投诉情况）   -->
    <div class="top-label">
      <van-tabs v-model="activeName">
        <!--        系统消息-->
        <van-tab name="a" title="系统消息">
          <div id="news" v-for="index in orderStatusCount" :key="index">
            <img src="@/assets/提醒icon.png" style="width: 55px; height: 55px; margin-top: 7.5px; margin-left: -274px;">
            <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">违约金支付提醒</span>
            <span
                style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
            {{forderDate}}</span>

            <span id="span1">您已逾期支付，请尽快支付，否则将产生违约金</span>
          </div>
          <div id="news" v-for="oe in orderStatusOverCount" :key="oe">
            <img src="@/assets/mail.png" style="width: 55px; height: 55px; margin-top: 7.5px; margin-left: -274px;">
            <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">支付通知</span>
            <span
                style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
            {{forderDate}}</span>

            <span id="span1">订单自动支付通知，订单自动支付通知，订单自动支付通知</span>
          </div>
        </van-tab>
        <!--        订单消息-->
        <van-tab name="b" title="订单消息">
          <div id="news" v-for="oe in order" :key="oe" @click="toDriverChatMessage(oe.userId)">
            <img :src="oe.img" style="width: 55px; height: 55px;border-radius: 50% ;margin-top: 7.5px; margin-left: -274px;">
            <span
                style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
              {{oe.arriveTime}}</span>
<!--            <span-->
<!--                style="position: absolute;-->
<!--                float: left;-->
<!--                margin-top: 10px;-->
<!--                margin-left: 10px">尾号{{oe.phone}}</span>-->
            <span
                style="position: absolute;
                float: left;
                margin-top: 10px;
                margin-left: 10px">{{oe.passengerName}}</span>
            <span id="span1">我已到达出发点，请您尽快赶往出发点上车，谢谢</span>
          </div>
        </van-tab>
        <!--        投诉情况-->
        <van-tab name="c" title="投诉情况">
          <van-tabs v-model="active">
            <!-- 全部 -->
            <van-tab name="a" title="全部">
              <div class="scrollable-container">
                <div class="OrderList" v-for="order in filteredOrders('all')" :key="order.oid">
                  <div class="OrderList1">
                    <van-icon class="OrderInco" name="underway" />
                    <span>{{ order.day }} &emsp;完成时间:&ensp;{{ order.completeTime }}</span>
                    <div v-if="order.status===1" class="OrderList11" @click="toAppeal(order.oid)">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                    <div v-if="order.status===2" id="status-2" @click="toResult(order.oid)">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                    <div v-if="order.status===3" id="status-3" @click="pass(order.oid)">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                    <div v-if="order.status===4" id="status-4">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="OrderList2">
                    <div class="OrderList22">
                      <span id="span2">{{ order.fromLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList3">
                    <div class="OrderList33">
                      <span id="span3">{{ order.toLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList4">
                    <div class="OrderList44" v-if="order.status===1">
                      <van-button type="default" @click="toAppeal(order.id)">查看</van-button>
                    </div>
                    <div class="OrderList44" v-if="order.status===2">
                      <van-button type="default" @click="toResult(order.id)">查看</van-button>
                    </div>
                    <div class="OrderList44" v-if="order.status===3">
                      <van-button type="default" @click="pass(order.id)">查看</van-button>
                    </div>
                    <div class="OrderList44" v-if="order.status===4">
                        <van-button type="default">查看</van-button>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <!-- 可申诉 -->
            <van-tab name="b" title="可申诉">
              <div class="scrollable-container">
                <div class="OrderList" v-for="order in filteredOrders(1)" :key="order.oid">
                  <div class="OrderList1">
                    <van-icon class="OrderInco" name="underway" />
                    <span>{{ order.day }} &emsp;完成时间:&ensp;{{ order.completeTime }}</span>
                    <div class="OrderList11" v-if="order.status===1" @click="toAppeal(order.oid)">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="OrderList2">
                    <div class="OrderList22">
                      <span id="span2">{{ order.fromLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList3">
                    <div class="OrderList33">
                      <span id="span3">{{ order.toLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList4">
                    <div class="OrderList44">
                      <van-button type="default" @click="toAppeal(order.oid)">查看</van-button>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <!-- 申诉中 -->
            <van-tab name="c" title="申诉中">
              <div class="scrollable-container">
                <div class="OrderList" v-for="order in filteredOrders(2)" :key="order.oid">
                  <div class="OrderList1">
                    <van-icon class="OrderInco" name="underway" />
                    <span>{{ order.day }} &emsp;完成时间:&ensp;{{ order.completeTime }}</span>
                    <div id="status-2" v-if="order.status===2" @click="toResult(order.oid)">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="OrderList2">
                    <div class="OrderList22">
                      <span id="span2">{{ order.fromLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList3">
                    <div class="OrderList33">
                      <span id="span3">{{ order.toLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList4">
                    <div class="OrderList44">
                      <van-button type="default" @click="toResult(order.oid)">查看</van-button>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <!-- 申诉通过 -->
            <van-tab name="d" title="申诉通过">
              <div class="scrollable-container">
                <div class="OrderList" v-for="order in filteredOrders(3)" :key="order.oid">
                  <div class="OrderList1">
                    <van-icon class="OrderInco" name="underway" />
                    <span>{{ order.day }} &emsp;完成时间:&ensp;{{ order.completeTime }}</span>
                    <div id="status-3" v-if="order.status===3" @click="pass(order.oid)">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="OrderList2">
                    <div class="OrderList22">
                      <span id="span2">{{ order.fromLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList3">
                    <div class="OrderList33">
                      <span id="span3">{{ order.toLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList4">
                    <div class="OrderList44">
                      <van-button type="default" @click="complaint">查看</van-button>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <!-- 申诉未通过 -->
            <van-tab name="e" title="申诉未通过">
              <div class="scrollable-container">
                <div class="OrderList" v-for="order in filteredOrders(4)" :key="order.oid">
                  <div class="OrderList1">
                    <van-icon class="OrderInco" name="underway" />
                    <span>{{ order.day }} &emsp;完成时间:&ensp;{{ order.completeTime }}</span>
                    <div id="status-4" v-if="order.status===4">
                      {{ getStatusText(order.status) }}
                      <van-icon name="arrow" />
                    </div>
                  </div>
                  <div class="OrderList2">
                    <div class="OrderList22">
                      <span id="span2">{{ order.fromLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList3">
                    <div class="OrderList33">
                      <span id="span3">{{ order.toLocation }}</span>
                    </div>
                  </div>
                  <div class="OrderList4">
                    <div class="OrderList44">
                      <van-button type="default" @click="complaint">查看</van-button>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </van-tab>
      </van-tabs>
    </div>

    <Tabbar/>
  </div>
</template>
<script>
import Tabbar from "@/components/Tabbar.vue"
import Vue from 'vue';
import {Tab, Tabs} from 'vant';
import {showAll, showAllAppeal, showStatus, showStatusOver} from "@/components/api/news/news";

Vue.use(Tab);
Vue.use(Tabs);



export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      activeName: 'a',
      active: 'a',
      time: '',
      orderStatusCount: null,
      orderStatusOverCount:null,
      orderDate: new Date(),
      order:[],
      orders:[],
    };
  },
  computed: {
    forderDate() {
      const year = this.orderDate.getFullYear();
      const month = String(this.orderDate.getMonth() + 1).padStart(2, '0');
      const day = String(this.orderDate.getDate()).padStart(2, '0');
      return `${year}/${month}/${day}`;
    },
  },
  methods: {
    OrderStatusCount(){
        showStatus().then(res=>{
          console.log("未完成订单："+res)
            if (res!=0){
              this.orderStatusCount=res
              // this.orderStatusCount=3
            }
      })
    },
    OrderStatusOverCount(){
        showStatusOver().then(res=>{
          console.log("未支付订单："+res)
            if (res!=0){
              this.orderStatusOverCount=res
              // this.orderStatusOverCount=2
            }
      })
    },
    async fetchData() {
      try {
        await Promise.all([this.OrderStatusCount(), this.OrderStatusOverCount()]);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    ShowOrder(){
      showAll().then(res=>{
        console.log(res.data)
        this.order=res.data
        console.log('showAll:',this.order)
      })
    },

    getStatusText(status) {
      switch (status) {
        case 1:
          return '可申诉';
        case 2:
          return '申诉中';
        case 3:
          return '申诉通过';
        case 4:
          return '申诉未通过';
        default:
          return '未知状态';
      }
    },
    complaint() {
      // 查看按钮点击处理逻辑
    },
    ShowAppeal(){
      showAllAppeal().then(res=>{
        this.orders=res.data
        console.log(this.orders)
      })
    },
    filteredOrders(filterType) {
      if (filterType === 'all') {
        return this.orders;
      } else {
        return this.orders.filter(order => order.status === filterType);
      }
    },
    toAppeal(ids){
      console.log(ids,"ids");
      this.$router.push({path:'/appeal',query:{ides:ids}})
    },
    toResult(ids){
      console.log(ids,"ids");
      this.$router.push({path:'/result',query:{ides:ids}})
    },
    pass(ids){
      console.log(ids,"ids");
      this.$router.push({path:'/pass',query:{ides:ids}})
    },
    hu(){
      let name=this.$route.query.name;
      if (name!=null&&name!==""){
        this.activeName=name;
      }
    },
    toDriverChatMessage(userId){
      this.$router.push({path:'/DriverChatMessage',query:{userId:userId}})
    },


    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    }
  },
  created() {
    this.updateTime();
    this.setSignalStatus();
    this.fetchData();
    this.OrderStatusCount();
    this.OrderStatusOverCount();
    this.ShowOrder();
    this.ShowAppeal();
    this.hu();
  }
};

</script>
<style>
.top-status-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
}

.top-label {
  position: fixed;
  top: 44px;
  width: 100%;
  background-color: white;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-left: -11px;
}

#news {
  width: 430.4px;
  height: 70px;
  margin-top: 10px;
  background-color: #f0f0f0;
}

#span1 {
  position: absolute;
  float: left;
  width: 329px;
  margin-top: 40px;
  margin-left: 10px;
  font-size: 15px;
  color: #9f9498;
  overflow: hidden;  /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

#tabulation{
  width: 430.4px;
  height: 115px;
  background-color: #f0f0f0;
}

.scrollable-container {
  height: 738px; /* 设置一个固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.OrderList {
  width: 98%;
  height: 170px;
  margin-top: 10px;
  background: #f0f0f0;
  margin-left: 5px;
}

.OrderList1 {
  width: 100%;
  height: 30px;
}

.OrderInco {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  color: #919191;
}

.OrderList1 span {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  font-size: 15px;
}

.OrderList11 {
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #508cf4;
  font-size: 15px;
}

.OrderList2 {
  width: 100%;
  height: 40px;
}

.OrderList22 {
  width: 10px;
  height: 10px;
  display: block;
  background: #009587;
  border-radius: 50%;
  margin-top: 20px;
  margin-left: 25px;
}

#span2 {
  display: block;
  text-align: left;
  font-size: 15px;
  margin-top: -6px;
  margin-left: 32px;
  width: 300px;
  overflow: hidden;  /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

#span3 {
  display: block;
  text-align: left;
  width: 300px;
  margin-top: -6px;
  margin-left: 32px;
  font-size: 15px;
  overflow: hidden;  /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

.OrderList3 {
  margin-top: -20px;
  width: 100%;
  height: 40px;
  margin-left: -1px;
}

.OrderList33 {
  width: 10px;
  height: 10px;
  background: #F0A439;
  border-radius: 50%;
  display: block;
  margin-top: 20px;
  margin-left: 25px;
}

.OrderList44 {
  width: 260px;
  height: 50px;
  display: inline-block;
  float: right;
  margin-top: -8px;
}

.OrderList44 button {
  width: 100px;
  height: 30px;
  margin-left: 118px;
  border-radius: 20px;
  border: 1px solid #767676;
}

#status-2 {
  /* 申诉中状态的样式 */
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #ff0000;
  font-size: 15px;
}
#status-3 {
  /* 申诉通过状态的样式 */
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #767676;
  font-size: 15px;
}
#status-4 {
  /* 申诉未通过状态的样式 */
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #767676;
  font-size: 15px;
}
</style>
